<template>
	<!-- 协议详情页面根容器 -->
	<view class="agreement-page">
		<!-- 导航栏：显示当前协议标题（如“用户服务协议”/“隐私政策”） -->
		<view class="navbar">
			<view class="title">{{ pageTitle }}</view>
		</view>

		<!-- 滚动容器：解决协议内容过长时的滚动问题，仅垂直滚动 -->
		<scroll-view class="content" scroll-y>
			<!-- 协议内容容器：包含标题、生效日期、分章节内容 -->
			<view class="agreement-content">
				<!-- 协议主标题：与导航栏标题一致，增强内容识别度 -->
				<view class="main-title">{{ pageTitle }}</view>
				<!-- 协议生效日期：明确协议生效时间 -->
				<view class="update-date">生效日期：2023年10月1日</view>

				<!-- 条件渲染：当协议类型为“service”时，显示《用户服务协议》内容 -->
				<template v-if="type === 'service'">
					<!-- 服务协议第一章：服务条款 -->
					<view class="section">
						<view class="section-title">一、服务条款</view>
						<view class="section-content">
							<view class="paragraph">1.1 本服务由我们提供，您在使用前需同意本协议所有条款</view>
							<view class="paragraph">1.2 我们有权根据业务需要更新服务内容，更新后将通过小程序公告通知您。</view>
						</view>
					</view>

					<!-- 服务协议第二章：用户义务 -->
					<view class="section">
						<view class="section-title">二、用户义务</view>
						<view class="section-content">
							<view class="paragraph">2.1 您应提供真实、准确的信息，如信息变更需及时更新。</view>
							<view class="paragraph">2.2 您不得利用本服务从事任何违法违规活动，否则我们有权终止服务。</view>
						</view>
					</view>
				</template>

				<!-- 条件渲染：当协议类型为“privacy”时，显示《隐私政策》内容 -->
				<template v-if="type === 'privacy'">
					<!-- 隐私政策第一章：信息收集 -->
					<view class="section">
						<view class="section-title">一、信息收集</view>
						<view class="section-content">
							<view class="paragraph">1.1 为提供服务，我们会收集您的微信昵称、头像及手机号（用于账号绑定）。</view>
							<view class="paragraph">1.2 我们不会收集与服务无关的信息，也不会向第三方泄露您的信息。</view>
						</view>
					</view>

					<!-- 隐私政策第二章：信息使用 -->
					<view class="section">
						<view class="section-title">二、信息使用</view>
						<view class="section-content">
							<view class="paragraph">2.1 收集的信息仅用于为您提供服务，如身份验证、业务通知等。</view>
							<view class="paragraph">2.2 您可随时联系我们查询或删除您的个人信息。</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	// 导入Vue的ref函数，用于创建响应式变量
	import { ref } from 'vue'

	// 响应式变量：协议类型（默认值为'service'，对应《用户服务协议》）
	// 取值范围：'service'=用户服务协议，'privacy'=隐私政策
	const type = ref('service')
	// 响应式变量：页面标题（导航栏和内容区标题，默认匹配服务协议）
	const pageTitle = ref('用户服务协议')

	/**
	 * 页面加载生命周期函数
	 * @param {Object} options - 页面跳转携带的参数（从登录页传递的type参数）
	 * 功能：根据跳转参数动态修改协议类型和页面标题，实现“一个页面渲染两种协议”
	 */
	const onLoad = (options) => {
		// 如果参数中type为'privacy'，则切换为隐私政策
		if (options.type === 'privacy') {
			type.value = 'privacy' // 更新协议类型
			pageTitle.value = '隐私政策' // 更新页面标题
		}
	}

	// 注册页面生命周期函数：将onLoad绑定到页面的onLoad生命周期
	// （uni-app+vite组合中，需通过definePageMeta注册页面级生命周期）
	definePageMeta({
		onLoad
	})
</script>

<style lang="scss" scoped>
	/* 页面根样式：全屏高度，白色背景（避免内容区域与背景色冲突） */
	.agreement-page {
		min-height: 100vh;
		background-color: #fff;
	}

	/* 导航栏样式：固定高度，底部边框分隔，标题居中 */
	.navbar {
		height: 100rpx; /* 导航栏固定高度（适配小程序rpx单位） */
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		border-bottom: 1px solid #eee; /* 底部浅灰边框，分隔导航栏与内容区 */
		position: relative;

		/* 导航栏标题样式：中等字号，加粗，深灰色 */
		.title {
			font-size: 34rpx;
			font-weight: 500;
			color: #333;
		}
	}

	/* 滚动容器样式：高度 = 屏幕高度 - 导航栏高度，确保滚动区域完整 */
	.content {
		height: calc(100vh - 100rpx); /* 动态计算高度，适配不同屏幕 */
		width: 100%; /* 占满屏幕宽度 */

		/* 协议内容容器：内边距控制，避免内容贴边 */
		.agreement-content {
			padding: 40rpx 30rpx; // 原代码笔误“40prx”已修正为“40rpx”，控制上下/左右内边距

			/* 协议主标题样式：大字号，加粗，居中，与内容区间距 */
			.main-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				text-align: center;
				margin-bottom: 20rpx;
			}

			/* 生效日期样式：小字号，浅灰色，居中，底部边框分隔 */
			.update-date {
				font-size: 24rpx; // 原代码笔误“224rpx”已修正为“24rpx”，避免字号过大
				color: #999;
				text-align: center;
				margin-bottom: 40rpx;
				padding-bottom: 20rpx; // 原代码笔误“20prx”已修正为“20rpx”，底部内边距
				border-bottom: 1px solid #eee; // 底部浅灰边框，分隔日期与正文
			}

			/* 协议章节容器：章节间间距控制 */
			.section {
				margin-bottom: 40rpx;

				/* 章节标题样式：中字号，加粗，深灰色，与上下内容间距 */
				.section-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					margin: 30rpx 0 15rpx; // 上下外边距，控制标题与内容的距离
				}

				/* 章节内容样式：中字号，中灰色，行高优化（原代码误写为.section-title已修正） */
				.section-content {
					font-size: 26rpx;
					color: #666;
					line-height: 1.8; // 行高1.8，提升多文字阅读体验

					/* 段落样式：段落间间距，首行缩进2字符（符合中文阅读习惯） */
					.paragraph {
						margin-bottom: 20rpx; // 段落底部间距
						text-indent: 2em; // 首行缩进2字符，优化排版
					}
				}
			}
		}
	}
</style>